@extends('common')
@section('content')
<link rel="stylesheet" type="text/css" href="{{url('assets/css/demo.css')}}" />
<link rel="stylesheet" type="text/css" href="{{url('assets/css/graph.css')}}" />
<div class="container">
            <section class="main">				
				<span class="button-label">大小:</span>
                <input type="radio" name="resize-graph" id="graph-small" />
                <label for="graph-small">矮</label>
                <input type="radio" name="resize-graph" id="graph-normal" checked="checked" />
                <label for="graph-normal">中</label>
                <input type="radio" name="resize-graph" id="graph-large" />
                <label for="graph-large">高</label>   

				<span class="button-label">颜色:</span>
                <input type="radio" name="paint-graph" id="graph-blue" checked="checked" />
                <label for="graph-blue">蓝色</label>
                <input type="radio" name="paint-graph" id="graph-green" />
                <label for="graph-green">绿色</label>
                <input type="radio" name="paint-graph" id="graph-rainbow" />
                <label for="graph-rainbow">七彩</label>

				<span class="button-label"></span>
                <input type="radio" name="fill-graph" id="f-none" />
                <label for="f-none">空</label>
                <input type="radio" name="fill-graph" id="f-product1" checked="checked" />
                <label for="f-product1">结果 1</label>
                <input type="radio" name="fill-graph" id="f-product2" />
                <label for="f-product2">结果 2</label>
                <input type="radio" name="fill-graph" id="f-product3" />
                <label for="f-product3">结果 3</label>

                <ul class="graph-container">
                    <li>
                        <span>90#汽油</span>
                        <div class="bar-wrapper">
                            <div class="bar-container">
                                <div class="bar-background"></div>
                                <div class="bar-inner">25</div>
                                <div class="bar-foreground"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>93#汽油</span>
                        <div class="bar-wrapper">
                            <div class="bar-container">
                                <div class="bar-background"></div>
                                <div class="bar-inner">50</div>
                                <div class="bar-foreground"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>97#汽油</span>
                        <div class="bar-wrapper">
                            <div class="bar-container">
                                <div class="bar-background"></div>
                                <div class="bar-inner">75</div>
                                <div class="bar-foreground"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>天然气</span>
                        <div class="bar-wrapper">
                            <div class="bar-container">
                                <div class="bar-background"></div>
                                <div class="bar-inner">100</div>
                                <div class="bar-foreground"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>柴油</span>
                        <div class="bar-wrapper">
                            <div class="bar-container">
                                <div class="bar-background"></div>
                                <div class="bar-inner">50</div>
                                <div class="bar-foreground"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <ul class="graph-marker-container">
                            <li style="bottom:75%;"><span>75%</span></li>
                            <li style="bottom:50%;"><span>50%</span></li>
                            <li style="bottom:75%;"><span>75%</span></li>
                            <li style="bottom:100%;"><span>100%</span></li>
                        </ul>
                    </li>
                </ul>
            </section>
        </div>
@stop